<template>
  <view class="search-container flex-col">
    <!-- #ifdef MP -->
    <navbar :title="appName" mode="{}"></navbar>
    <view class="search-input-container flex-row align-center">
      <image src="/static/search/sousuo.png" mode="widthFix" class="search-icon"></image>
      <input type="text" v-model="searchKWs" class="search-input" placeholder="输入关键词"
             placeholder-style="color:#7D7D7D;font-size:28upx;"
             confirm-type="search"
             @confirm="toSearch(keyWords)"
             focus="true"/>
      <view class="search-btn center" @click="toSearch(keyWords)">
        搜索
      </view>
    </view>
    <view class="relate-container" :style="{top: (topBar.height+38)+'px'}" v-if="keyWords.length">
      <template v-for="item in relate">
        <view @click="toSearch(item.content)" :key="item.content" class="row" >
          <image src="@/static/sousuoItem.png" style="margin-top: 27upx;width: 26upx;height: 26upx;margin-right: 8upx"></image>
          <rich-text :nodes="item.htmlContent"></rich-text>
        </view>
      </template>
    </view>
    <!-- #endif -->
    <!-- #ifndef MP -->
    <view class="status-contents flex-row" :style="{paddingTop: topBar.statusBarHeight+'px', height: topBar.navbarHeight+'px'}">
      <image src="../../static/black_back.png" mode="widthFix" class="back" @click="toBack"></image>
      <view class="search-input-container flex-row align-center">
        <image src="/static/search/sousuo.png" mode="widthFix" class="search-icon"></image>
        <input type="text" v-model="searchKWs" class="search-input" placeholder="输入关键词"
               placeholder-style="color:#727272;font-size:14px"
               confirm-type="search"
               @confirm="toSearch(keyWords)"
               focus="true"/>
        <image v-if="keyWords.length"
               src="/static/quxiao_input@3x.png" mode="widthFix" class="clear-icon"
               @click="searchKWs=''"
        ></image>
      </view>
      <view class="cancel-btn center" @click="toSearch(keyWords)">
        <text class="cancel-btn-title">搜索</text>
      </view>
    </view>
    <view class="relate-container" :style="{top: topBar.height+'px'}" v-if="keyWords.length">
      <template v-for="item in relate">
        <view @click="toSearch(item.content)" :key="item.content" class="row" >
          <image src="@/static/sousuoItem.png" style="margin-top: 27upx;width: 26upx;height: 26upx;margin-right: 8upx"></image>
          <rich-text :nodes="item.htmlContent"></rich-text>
        </view>
      </template>
    </view>
    <!-- #endif -->
    <view v-if="!keyWords.length">
      <view class="group" v-if="last.length">
        <view class="group-title">最近搜索
          <view style="float: right" @click="clearLocal">
            <image src="../../static/shanchu_search.png" style="width: 26upx;height: 28upx;margin-right: 10upx;margin-left: 10upx"/>
          </view>
        </view>
        <view class="group-body">
          <template v-for="(item, n) in last">
            <view @click="toSearch(item)" class="kws" :key="n">
              <text class="text">{{ item }}</text>
            </view>
          </template>
        </view>
      </view>
      <view class="group">
        <view class="group-title">热题搜索</view>
        <view class="group-body">
          <template v-for="item in hot">
            <view :class="['kws',item.hot===2?'red':'']"
                  :key="item.content"
                  @click="toSearch(item.content)">
              <text class="text">{{ item.content }}</text>
            </view>
          </template>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {mapGetters, mapActions} from 'vuex'
import {searchApi} from "@/api.js";
import Storage from "@/libs/Storage";
import navbar from "../../components/navbar";

export default {
  components: {navbar},
  data() {
    return {
      last: [],
      hot: [],
      relate: [],
      searchKWs: null,
      keyWords:'',
    }
  },
  watch: {
    async searchKWs(val) {
      this.keyWords = val
      const res = await searchApi.searchRelate(val)
      let  arr = res.data.data.list
      arr.forEach((item,index)=>{
        if (item.content.indexOf(val)!=-1){
            item.htmlContent =  item.content.replace(val,"<span style='color:#969696'>"+val+"</span>")
        }
      })
      this.relate = arr
    },

  },
  computed: {
    ...mapGetters(['topBar', 'appName']),

  },
  onLoad(query) {
    Storage.get('search').then(last => {
      this.last = last || []
    })

    searchApi.hotSearches().then(res => {
      this.hot = res.data.data.list
    })
  },
  methods: {
    toBack() {
      uni.navigateBack()
    },
    clearLocal() {
      this.last = []
      Storage.del('search')
    },
    toSearch(kws) {
      console.log('toSearch', kws)
      if (!kws) return;
      const last = [...this.last]
      const i = last.findIndex(item => item === kws)
      if (i > -1) {
        last.splice(i, 1)
      }
      last.splice(0, 0, kws)
      Storage.set('search', last)
      this.last = last
      uni.navigateTo({
        // url: '/pages/detail/detail?type=search&title=搜索结果&kws=' + kws
        url:'/pages/search_detail/search_detail?kws=' + kws
      })
    }
  }
}
</script>

<style lang="scss">
@import './search.scss';
</style>
